<template>
    <div class="TaskWarp" :class="{teachDivMain:BeginTeaching}">
        <div class="divMain WENZIPAIXU" @click.stop>
            <div class="divTitle">
                <h2>{{Questions.child.QuestionRemark}}</h2>
            </div>
            <div class="tigan" v-html="Questions.child.stem[0].StemContent"></div>
            <div class="divContent" :style="{top:divContentTop}">
                <div class="touchMove" @touchstart="TOUCHMOVE" @mousedown="TOUCHMOVE">
                    下拉刷新显示
                </div>
                    <div class="boxContent">
                        <!--<div class="chooseList" style="height: 70%;overflow-y: scroll">-->
                            <draggable v-model="Questions.child.stem[0].opts">
                                <div class="divItem" v-for="(item,index) in Questions.child.stem[0].opts">
                                    <span class="OptionsIndex">{{index+1}}</span>{{item.OptionContent}}</span>
                                </div>
                            </draggable>
                        <!--</div>-->
                    </div>
            </div>
        </div>
        <div class="Close" v-show="!BeginTeaching">
            <i class="el-icon el-icon-close"></i>
        </div>
    </div>
</template>

<script>
    import draggable from 'vuedraggable'
    import {mapGetters, mapActions} from 'vuex'
    export default {
        name: "WENZIPAIXU",
        props: ["Questions"],
        computed: mapGetters([
            'divContentTop',
            'BeginTeaching'
        ]),
        methods: {
            ...mapActions([
                'TOUCHMOVE'
            ]),
        },
        components: {
            draggable,
        },
        mounted() {
            $('.divContent').height(parseFloat($('.WENZIPAIXU').height())-80)
            $('.tigan').height(parseFloat($('.WENZIPAIXU').height())-80)
            $('.boxContent').height(parseFloat($('.divContent').height())-56)
            window.onresize=function () {
                $('.divContent').height(parseFloat($('.WENZIPAIXU').height())-80)
                $('.tigan').height(parseFloat($('.WENZIPAIXU').height())-80)
                $('.boxContent').height(parseFloat($('.divContent').height())-56)
            }
        },
        data () {
            return {}
        }
    }


</script>


<style lang="scss" rel="stylesheet/scss" scoped>
    @import '../../../assets/css/public.scss';

    .TaskWarp {
        height: 90%;
        width: 90%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        .divMain {
            position: absolute;
            overflow: hidden;
            height: 100%;
            width: 100%;
            .divTitle {
                height: 80px;
                background: #fff;
                box-shadow: 0 10px 20px 2px rgba(197, 208, 218, 0.8);
                h2 {
                    font-size: 20px;
                    line-height: 80px;
                    color: #56545A;
                }
            }
            .tigan {
                font-size: 24px;
                background: #D4D7D9;
                line-height: 2em;
                min-height: 100%;
            }
            .divContent {
                background: #fff;
                position: absolute;
                top: 140px;
                left: 0;
                width: 100%;
                overflow: hidden;
                height: 100%;
                .touchMove {
                    margin: 0 auto;
                    width: 309px;
                    height: 56px;
                    font-size: 16px;
                    background: #81a4ff;
                    border-radius: 0 0 8px 8px;
                    line-height: 56px;
                    text-align: center;
                    color: #fff;
                    font-weight: bold;
                }
                .boxContent {
                    overflow: scroll;
                    .divItem {
                        width: 80%;
                        margin: 1em auto;
                        border-radius: 20px;
                        box-shadow: 0 2px 8px 0 #c5d0da;
                        height: 80px;
                        line-height: 80px;
                        padding: 0 54px;
                        font-size: 24px;
                        font-weight: bold;
                        position: relative;
                        background: #fff;
                        .OptionsIndex {
                            position: absolute;
                            width: 26px;
                            height: 26px;
                            border-radius: 50%;
                            background: #007aff;
                            line-height: 26px;
                            font-size: 20px;
                            text-align: center;
                            color: #fff;
                            top: 0px;
                            left: 15px;
                            bottom: 0px;
                            margin: auto;
                        }
                    }
                }
            }
            .current span {
                color: #666;
            }
        }
    }
</style>
